<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="bgc" slot="top">
				<navbar></navbar>
				<view class="tab">
					<u-tabs :keyName="language=='zh'?'zh':'en'" :activeStyle="activeStyle" inactiveStyle="color:#141414"
						:list="tabList" :itemStyle="itemStyle" lineWidth="21" lineHeight="23"
						:lineColor="`url(${lineBg}) 100% 100%`" :scrollable="false" @click="tabClick"
						:current="current"></u-tabs>
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
					<u--image :src="item.shop_avatar" width="100%" height="80px" radius="8"></u--image>
					<view>
						<u--text :text="language=='zh'?item.shopname:item.shopname_copy" bold color="#333" size="17" margin="0 0 10px 0" lines="1"></u--text>
						<view class="status">
							<view>
								<u--text :text="'预定时间 '+timewhole(item.reserve_time)" color="#989898" size="13" margin="0 0 10px 0" lines="1"></u--text>
								<view class="info" v-if="item.is_box == '1'">
									<text class="table">大堂：{{item.num||0}}号</text>
									<text class="person" v-if="item.people_num">{{item.people_num}}</text>
								</view>
								<view class="info" v-if="item.is_box == '0'">
									<text class="table">包厢：{{language == 'zh' ? item.room_name : item.room_name_copy}}</text>
									<text class="person" v-if="item.people_num">{{item.people_num}}</text>
								</view>
							</view>
							<u--image v-if="item.state==4" :src="imgUrl+'cancel.png'" width="50px" height="50px"></u--image>
							<u--image v-if="item.state==2" :src="imgUrl+'success.png'" width="50px" height="50px"></u--image>
							<u--image v-if="item.state==3" :src="imgUrl+'failing.png'" width="50px" height="50px"></u--image>
							<u--image v-if="item.state==1" :src="imgUrl+'reserve.png'" width="50px" height="50px"></u--image>
						</view>
					</view>
				</view>
			</view>
			<view slot="bottom">
				<tabbar :value="1"></tabbar>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				imgUrl:this.$IMAGE_URL,
				lineBg: "",
				dataList: [],
				tabList: [{
					zh: '全部',
					en: 'ھەممىسى',
					type:''
				},{
					zh: '预定成功',
					en: 'مۇۋەپپەقىيەت قازانماق',
					type:2
				}, {
					zh: '预定失败',
					en: 'مەغلۇپ بولماق',
					type:3
				}, {
					zh: '已取消',
					en: 'ئەمەلدىن قالدۇرۇش',
					type:4
				}],
				current: 0,
				activeStyle: {
					color: "#141414",
					fontWeight: "bold"
				},
				itemStyle: {
					height: "55px",
					marginBottom:"10rpx"
				},
			}
		},
		computed: {
			language() {
				return this._i18n.locale
			},
			...mapGetters(['isLogin'])
		},
		onLoad() {
			uni.$on("upList",()=>{
				this.$refs.paging.reload()
			})
		},
		methods: {
			queryList(pageNo, pageSize) {
				if(this.isLogin){
					this.$http.post('wanlshop/reserve/reserveList',{
						page:pageNo,
						limit:pageSize,
						state:this.tabList[this.current].type
					}).then(res=>{
						if(res.code==1){
							this.$refs.paging.complete(res.data.data)
						}else{
							this.$refs.paging.complete(false)
						}
					})
				}else{
					let arr = []
					this.$refs.paging.complete(arr)
				}

			},
			tabClick(e) {
				this.current = e.index
				this.$refs.paging.reload()
			},
			goDetail(item){
				if(item.state==4){
					uni.$u.toast('预定取消')
					return
				}
				if(item.state==3){
					uni.$u.toast('预定失败')
					return
				}
				uni.$u.route('/pagesA/subscribe/detail',{
					id:item.id
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f6fb;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item__text {
		font-size: 26rpx !important;
	}

	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 !important;
	}

	/deep/.u-tabs__wrapper__nav__line {
		bottom: -6rpx !important;
	}

	.bgc {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		height: 260rpx;
		background-color: #fff;
		position: relative;
		background-image: url();

		.nav_left {
			display: flex;
			align-items: center;

			.location {
				width: 30rpx;
				height: 33rpx;
				margin-right: 10rpx;
			}
		}

		.tab {
			position: absolute;
			left: 0;
			bottom: -8rpx;
			width: 100%;
		}
	}

	.content {
		padding: 30rpx;

		.item {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 18rpx;
			box-shadow: 5px 5px 18px 0px rgba(232, 234, 236, 0.51);
			display: grid;
			grid-template-columns: 80px auto;
			grid-column-gap: 20rpx;
			margin-bottom: 20rpx;

			.status {
				display: flex;
				justify-content: space-between;

				.info {
					color: #FF9F04;
					font-size: 26rpx;

					.table {
						margin-right: 40rpx;
					}
				}
			}
		}

		.item:last-child {
			margin-bottom: 0;
		}
	}
</style>
